<template>
	<view class="main-cont">
		<view class="content">
			<view class="tips">
				<view class="mt10">
					请选择您的身份
				</view>
			</view>
			<view v-for="(item,index) in roles" :key="index" class="list">
				<view v-if="item=='tr'" @click="selectrole('tr',1)" class="list-item">
					<view class="posa">
						老师
					</view>
					<u-image width="632rpx" height="248rpx" src="https://yhykt.oss-cn-beijing.aliyuncs.com/08921408F7854BBB90F8A0A1DAB325AE%E8%80%81%E5%B8%88.png?Expires=4789677442&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=aJpW%2BCdrwCV0bkRJ5lV2MGrQFok%3D"></u-image>
					<view class="posa1" v-if="active == (index+1)">
						<view class="circle"></view>
					</view>
					<view class="posa1" v-if="active != (index+1)">
						<view class="circle1"></view>
					</view>
				</view>
				
				<view v-if="item=='stu'" @click="selectrole('stu',2)" class="list-item">
					<view class="posa">
						学生
					</view>
					<u-image width="632rpx" height="248rpx" src="https://yhykt.oss-cn-beijing.aliyuncs.com/EEB161EF39914C1B8B1EE29081ECC4B4%E5%AD%A6%E7%94%9F.png?Expires=4789943235&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=C3EQBD4isi3S8Ab3pTELZ6cLf1k%3D"></u-image>
					<view class="posa1" v-if="active == (index+1)">
						<view class="circle"></view>
					</view>
					<view class="posa1" v-if="active != (index+1)">
						<view class="circle1"></view>
					</view>
				</view>
			</view>
			<button class="btn" @click="login()">确 定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				schoolid:'',
				schoolname:'',
				user: '',
				role: '',
				roles: ['tr','stu'],
				active:1,
				customStyle: {
					width:'560rpx',
					height:'86rpx',
				    boxShadow: '0px 14rpx 40rpx 0rpx #626BF1',
				    borderRadius: '43rpx',
				    marginTop: '60rpx',
					background: 'linear-gradient(0deg, #626BF1, #7686F6)',
					border:'none',
					color:'#fff',
					fontSize:'34rpx'
				},
				personRole:'',
			}
		},
		mounted() {
		},
		onLoad: function(options) {
			this.schoolid=options.schoolid;
			this.schoolname = options.schoolname;
			//console.log(">>>selectRoles");
			//console.log(options);
		},
		methods: {
			selectrole(role,index){
				this.personRole = role
				this.active = index
			},
			login(){
				uni.navigateTo({url: '/team/tr/join?selectedrole='+this.active+'&schoolid='+this.schoolid+'&schoolname='+this.schoolname})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/30AE679C0DB443CC8A3E67477858DEC2%E8%83%8C%E6%99%AF.png?Expires=4789677474&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=3vSNkiSXqT%2FsBzYPIe3MaW%2BAg0E%3D) no-repeat;
		background-size: 100%;
		color: #fff;
		background-color: #f7f6fe;
		
		.tips {
			width: 80%;
			font-size: 42rpx;
			color: #000;
		}
		
		.list-item{
			position: relative;
			margin-top: 70rpx;
			width: 632rpx;
			height: 248rpx;
			background: #6E75F1;
			border-radius: 20rpx;
			font-size: 36rpx;
			text-align: center;
			overflow: hidden;
			
			.posa {
				position: absolute;
				top:33rpx;
				left: 48rpx;
				z-index: 100000;
			}
			
			.posa1 {
				position: absolute;
				top:33rpx;
				right: 48rpx;
				z-index: 100000;
			}
		}
	}
	
	.btn{
		margin-top: 80rpx;
		width: 560rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: linear-gradient(0deg, #626BF1, #7686F6);
		box-shadow: 0px 14rpx 40rpx 0px #626BF1;
		border-radius: 43rpx;
		color: #FFFFFF;
		font-size: 34rpx;
	}
	
	.circle {
		width: 41rpx;
		height: 41rpx;
		background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/8373937871D642CF93C909C9D9218F79%E7%A1%AE%E8%AE%A4.png?Expires=4789677454&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=ysEdKFMXiXvAtwCvqkY7rcFWOfk%3D) no-repeat;
		background-size: 100% 100%;
	}
	
	.circle1 {
		width: 41rpx;
		height: 41rpx;
		background: url(https://yhykt.oss-cn-beijing.aliyuncs.com/901CC0724083486FACF02942148160D832d30abd1e6fc6d465fb873971bb05b.png?Expires=4789682622&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=TwZ0DozSpyYF4YAQCEsVBkdRs04%3D) no-repeat;
		background-size: 100% 100%;
	}
	
</style>
